
//常用方法封装
var utils ={
    /**
   * 截取url传递的参数 
   * @param name   参数key值 
   */
  getUrlString:function (name){
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return (r[2]);
    return null;
  }
}

new Vue({
    el: '#app',
    data:{
        name: "",
        selectRules: [],
        textRules: [],
        ruleContent: ""
    },
    created() {
      let ruleId = utils.getUrlString("gameid");
      if(!ruleId) ruleId ='100001';
      console.log(ruleId);
      //使用json文件
      axios(`./games/${ruleId}.json`).then(res => {
        let data = res.data;
        console.log(data);
        this.name = data.gameName;
        // 生成可以选择的选项
        this.selectRules = data.selectRules;
        this.textRules = data.textRule;
        // 规则前边的图片
        if (data.type === "poker") {
          this.$refs.title.classList.add("poker_bg");
        } else if (data.type === "mahjong") {
          this.$refs.title.classList.add("mahjong_bg");
        }
      });
    },
    methods: {
      showDesc(rules, event) {
        this.ruleContent = rules;
        let selectRuleDom = document.querySelectorAll(".select_rules");
        for (let i = 0; i < selectRuleDom.length; i++) {
          selectRuleDom[i].style.display = "none";
        }
        let dom = event.target.parentElement.parentElement.nextElementSibling;
        dom.style.display = "block";
        // 去除所有按钮的点击效果
        let actives = document.querySelectorAll(".rulename");
        for (let i = 0; i < actives.length; i++) {
          actives[i].classList.remove("active");
        }
        event.target.classList.add("active");
      },
      textClick(event) {
        let currentDom = event.target;
        event.target.tagName === "I" && (currentDom = event.target.parentElement);

        let selectRuleDom = document.querySelectorAll(".select_rules");
        for (let i = 0; i < selectRuleDom.length; i++) {
          selectRuleDom[i].style.display = "none";
        }
        let dom = currentDom.parentElement.nextElementSibling;
        dom.style.display = "block";
        // 去除三角的反转效果
        let actives = document.querySelectorAll(".text_title");
        for (let i = 0; i < actives.length; i++) {
          actives[i].classList.remove("text_active");
        }
        currentDom.classList.add("text_active");
      }
    }
  });